@import "base.scss";
@import "mixin.scss";

//cover
.dialogCover {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(7,17,27,.3);
    z-index: 9999;
}

// dialog common CSS
.dialog {
    top: 50%;
    left: 50%;
    @include borderRadius(3px);
    background-color: $colorfff;
    z-index: 10000;
    &.showPopup {
        -webkit-animation: showPopup .2s;
        -moz-animation: showPopup .2s;
        -ms-animation: showPopup .2s;
        -o-animation: showPopup .2s;
        animation: showPopup .2s;
    }
    &.hidePopup {
        -webkit-animation: hidePopup .2s;
        -moz-animation: hidePopup .2s;
        -ms-animation: hidePopup .2s;
        -o-animation: hidePopup .2s;
        animation: hidePopup .2s;
    }
    .del {
        font-size: $fontSize18;
        padding:$fontSize14 $fontSize20 0;
        a:hover {
            color: $color333;
        }
    }
}
@-webkit-keyframes showPopup {
    0%{
        @include transform(scale(.5));
    }to{
        @include transform(scale(1));
    }
}
@-moz-keyframes showPopup {
    0%{
        @include transform(scale(.5));
    }to{
        @include transform(scale(1));
    }
}
@-ms-keyframes showPopup {
    0%{
        @include transform(scale(.5));
    }to{
        @include transform(scale(1));
    }
}
@-o-keyframes showPopup {
    0%{
        @include transform(scale(.5));
    }to{
        @include transform(scale(1));
    }
}
@keyframes showPopup {
    0%{
        @include transform(scale(.5));
    }to{
        @include transform(scale(1));
    }
}
@-webkit-keyframes hidePopup {
    0%{
        @include transform(scale(1));
    }to{
        @include transform(scale(.5));
    }
}
@-moz-keyframes hidePopup {
    0%{
        @include transform(scale(1));
    }to{
        @include transform(scale(.5));
    }
}
@-ms-keyframes hidePopup {
    0%{
        @include transform(scale(1));
    }to{
        @include transform(scale(.5));
    }
}
@-o-keyframes hidePopup {
    0%{
        @include transform(scale(1));
    }to{
        @include transform(scale(.5));
    }
}
@keyframes hidePopup {
    0%{
        @include transform(scale(1));
    }to{
        @include transform(scale(.5));
    }
}

// exchange coupon
.exchangeCoupon {
    width: 43 * $fontSize10;
    margin-top: - (30 * $fontSize10);
    margin-left: - (21 * $fontSize10 + 5);
    .content {
        padding:0 2 * $fontSize18 4 * $fontSize10;
    }
    .title {
        font-size: $fontSize18;
        color: $color111;
        margin-bottom: 3 * $fontSize10 + 4;
    }
    .inputBox {
        .text {
            font-size: $fontSize14;
            color: $color666;
            vertical-align: top;
            margin-top: $fontSize16 / 2;
        }
        input {
            margin:$fontSize12 / 3 $fontSize16 / 2 0;
            padding: 0 $fontSize12 / 2 $fontSize12 / 3;
            width: 18 * $fontSize10;
            font-size: $fontSize14;
            color: $color111;
            border: none;
            outline: none;
            border-bottom: $fontSize10 / 5 solid $colore5;
        }
        .confirm {
            width: 7 * $fontSize10;
            height: 3 * $fontSize10;
            line-height: 3 * $fontSize10;
            font-size: $fontSize14;
            color: $colorfff;
            margin-left: $fontSize12 / 2;
            @include link-posColor($theme,$darkTheme);
        }
    }
    .infos {
        font-size: $fontSize12;
        color: $colorab;
        padding: $fontSize20 + 6 0 $fontSize18;
        a {
            margin-left: 3 * $fontSize10;
            @include  link-colors($theme,$darkTheme);
        }
    }
    .helpInfo {
        display: none;
        padding: $fontSize14 3 * $fontSize10 + 6 $fontSize14;
        margin: 0 (- 2 * $fontSize18);
        background: #eff1f3;
        li {
            font-size: $fontSize14 - 1;
            color:$color666;
            line-height: $lineHeight;
            list-style: decimal inside;
        }
        .trigon {
            top:- $fontSize10;
            right: 6 * $fontSize10 + 8;
            width: 0;
            height: 0;
            border-left: $fontSize14 + 1 solid transparet;
            border-right: $fontSize14 + 1 solid transparet;
            border-bottom: $fontSize20 solid #eff1f3;
        }
    }
    .couponList {
        margin:0 (- 2 * $fontSize18);
        padding: $fontSize16 2 * $fontSize18 0;
        border-top: $fontSize10 / 10 solid $colorccc;
        .text {
            font-size: $fontSize16;
            color: $color111;
        }
        .coupon {
            width: 32 * $fontSize10;
            height: 6 * $fontSize10 + 5;
            margin: $fontSize12 auto 0;
            color: $colorfff;
            background-image: url("../img/activity/coupon1.png");
            background-repeat: no-repeat;
            background-position: 0 0;
            .num {
                right: - ($fontSize12 / 2);
                top: - ($fontSize12 / 2);
                width: $fontSize18;
                height: $fontSize18;
                line-height: $fontSize18;
                font-size: $fontSize12;
                color: $colorfff;
                background: #fb560a;
                z-index: 9;
            }
            .courseMsg {
                width: 17 * $fontSize10;
                margin-left: 8 * $fontSize10;
                padding-top: $fontSize12;
            }
            .courseTitle {
                font-size: $fontSize16;
                line-height: $lineHeight;
            }
            .timeLimit {
                font-size: $fontSize12;
                line-height: $lineHeight - 0.1;
            }
            .predict {
                width: 7 * $fontSize10;
                height: 6 * $fontSize10 + 5;
                line-height: 6 * $fontSize10 + 5;
                right: 0;
                top: 0;
                font-size: $fontSize18;
                color: $colorfff;
                @include borderRadius(0 10px 10px 0);
                &:hover {
                    background: #2172e6;
                }
            }
        }
        .emptyInfo {
            padding-top: $fontSize20;
            font-size: $fontSize14;
            color: $colorab;
            .icon {
                width: 11 * $fontSize10 + 1;
                height: 10 * $fontSize10 + 5;
                margin:0 auto $fontSize14 + 1;
                background-image: url("../img/icons/info.png");
                background-repeat: no-repeat;
                background-position: 0 0;
            }
        }
    }
}

// predictComplete
.predictComplete {
    width: 43 * $fontSize10;
    margin: - 21 * $fontSize10 0 0 (- (21 * $fontSize10 + 5));
    overflow: hidden;
    .infos {
        margin: $fontSize10 0 $fontSize20;
        img {
            width: 5 * $fontSize10 + 7;
            height: 5 * $fontSize10 + 7;
        }
        .text {
            font-size: $fontSize18;
            color: $color111;
            margin: $fontSize14 + 1 0 $fontSize10;
        }
        .tips {
            font-size: $fontSize14;
            color: $theme;
        }
    }
    .coupon {
        width: 29 * $fontSize10;
        height: 6 * $fontSize10 + 5;
        margin: 0 auto;
        color: $colorfff;
        background: url("../img/activity/coupon2.png") no-repeat center;
        .num {
            right: - ($fontSize12 / 2);
            top: - ($fontSize12 / 2);
            width: $fontSize18;
            height: $fontSize18;
            line-height: $fontSize18;
            font-size: $fontSize12;
            color: $colorfff;
            background: #fb560a;
            z-index: 9;
        }
        .courseMsg {
            width:19 * $fontSize10 + 5;
            margin-left: 8 * $fontSize10 + 5;
            padding-top: $fontSize12;
        }
        .courseTitle {
            font-size: $fontSize16;
            line-height: $lineHeight;
        }
        .timeLimit {
            font-size: $fontSize12;
            line-height: $lineHeight - 0.1;
        }
    }
    .description {
        font-size: $fontSize14;
        color: $color666;
        margin: $fontSize14 + 1 5 * $fontSize10 $fontSize20;
        line-height: $lineHeight - 0.1;
    }
    .shares {
        border-top: 1px solid $colorccc;
        padding: $fontSize14 + 1 0 $fontSize20 + 5;
        background: #eff1f3;
        .text {
            font-size: $fontSize14;
            color: $color111;
            margin-bottom: $fontSize14 + 1;
        }
        .shareWays {
            padding: 0 13 * $fontSize10 + 5;
        }
        a {
            display: inline-block;
            width: 3 * $fontSize10 + 4;
            height: 3 * $fontSize10 + 4;
            text-indent: 0;
            margin: 0 $fontSize16 / 2 0 0;
            background-image: url("../img/icons/postFinished.png");
            background-repeat: no-repeat;
            &.bds_tsina {
                @include link-backPos(((- (12 * $fontSize10 + 2)) (- (3 * $fontSize10 + 7))),((- (12 * $fontSize10 + 3)) 0));
            }
            &.bds_weixin {
                @include link-backPos(((- (4 * $fontSize10 + 1)) (- (3 * $fontSize10 + 7))),((- (4 * $fontSize10 1)) 0));
            }
            &.bds_sqq {
                @include link-backPos((0 (- (3 * $fontSize10 + 7))),(0 0));
            }
            &.bds_qzone {
                @include link-backPos((- (8 * $fontSize10 + 2) (- (3 * $fontSize10 + 7))),(- (8 * $fontSize10 + 2) 0));
            }
        }
    }
}

// checkFollower && .checkSupporter -> user sight
.checkFollower,.checkSupporter {
	width: 43 * $fontSize10;
    margin:- 23 * $fontSize10 0 0 (- (21 * $fontSize10) + 5);
    .workerMsg {
        padding:0 4 * $fontSize10 + 2;
        margin-bottom: $fontSize12;
        > .nickName {
            font-size: $fontSize16;
            color: $color111;
            margin:$fontSize10 / 2 0 $fontSize10;
        }
        .description {
            font-size: $fontSize14;
            color: $color666;
            line-height: $lineHeight - 0.1;
        }
    }
    .workerPic {
        width: 9 * $fontSize10;
        height: 9 * $fontSize10;
        margin:0 auto;
        img {
            width: 100%;
            height: 100%;
        }
    }
    .progressBox {
        padding:0 4 * $fontSize10 + 2;
        .userPicBox {
            height: 2 * $fontSize18;
            margin-bottom: $fontSize16 / 2;
            .userPic {
                width: 2 * $fontSize18;
                height: 2 * $fontSize18;
                top: 0;
                &.num1 {
                    left:29%;
                }
                &.num2 {
                    left:61%;
                }
                &.num3 {
                    left:90%;
                }
            }
            img {
                width:100%;
                height: 100%;
            }
        }
        .progress {
            height: $fontSize10 / 2;
            background: $colorccc;
            .record {
                height: $fontSize10 / 2;
                top: 0;
                left: 0;
                width: 66.6%;
                background: $theme;
            }
            .circle {
                display: block;
            	width: $fontSize10;
            	height: $fontSize10;
            	top: - $fontSize12 / 4;
            	background: $colorccc;
            	z-index: 5;
                &.active {
                    background: $theme;
                }
                &.num1 {
                    left: 32.3%;
                }
                &.num2 {
                    left: 64.6%;
                }
                &.num3 {
                    left: 97.9%;
                }
            }
        }
        .btns {
            margin:$fontSize16 0 $fontSize10;
            a {
                padding:$fontSize12 / 2 $fontSize12;
                font-size: $fontSize14;
                @include border($fontSize10 / 10,solid,$color666);
                &:hover {
                    color: $colorfff;
                    background: #b6b6b6;
                    border-color: #b6b6b6;
                }
                &.active {
                    @include border($fontSize10 / 10,solid,$theme);
                    @include link-colors($theme,$colorfff);
                    &:hover {
                        background: $theme;
                    }
                }
            }
            .support {
                margin-right: 3 * $fontSize10;
            }
        }
        .text {
            font-size: $fontSize12;
        	color: #999;
        	margin-bottom: $fontSize12;
        }
    }
    .follower {
        border-top: $fontSize10 / 10 solid $colorccc;
    	padding:$fontSize14 + 1 4 * $fontSize10 $fontSize20;
        .text {
            font-size: $fontSize16;
            color: $color111;
            margin-bottom: $fontSize12;
        }
        .emptyInfo {
            font-size: $fontSize14;
            color: $colorab;
            padding:$fontSize12 / 2 0;
        }
    }
    .followerList a {
        width: 5 * $fontSize10;
        margin-right: 3 * $fontSize10;
        img {
            width: 4 * $fontSize10;
            height: 4 * $fontSize10;
        }
        .nickName {
            font-size: $fontSize14;
            color: $color666;
            margin-top: $fontSize12 / 2;
        }
    }
}

// checkFollower && .checkSupporter -> worker sight
.checkSupporter {
    margin-top: - 31 * $fontSize10;
    .shares {
        border-top: $fontSize10 / 10 solid $colorccc;
	    border-bottom: $fontSize10 / 10 solid $colorccc;
	    padding:$fontSize12 4 * $fontSize10;
        .text {
            font-size: $fontSize16;
            color: $color111;
            margin:$fontSize16 / 2 3 * $fontSize10 0 0 !important;
        }
        a {
            display: inline-block;
            width: 3 * $fontSize10 + 4;
            height: 3 * $fontSize10 + 4;
            text-indent: 0;
            margin: 0 $fontSize16 / 2 0 0;
            background-image: url("../img/icons/postFinished.png");
            background-repeat: no-repeat;
            &.bds_tsina {
                @include link-backPos(((- (12 * $fontSize10 + 2)) (- (3 * $fontSize10 + 7))),((- (12 * $fontSize10 + 3)) 0));
            }
            &.bds_weixin {
                @include link-backPos(((- (4 * $fontSize10 + 1)) (- (3 * $fontSize10 + 7))),((- (4 * $fontSize10 1)) 0));
            }
            &.bds_sqq {
                @include link-backPos((0 (- (3 * $fontSize10 + 7))),(0 0));
            }
            &.bds_qzone {
                @include link-backPos((- (8 * $fontSize10 + 2) (- (3 * $fontSize10 + 7))),(- (8 * $fontSize10 + 2) 0));
            }
        }
    }
    .coupon {
        width: 32 * $fontSize10;
	    height: 6 * $fontSize10 + 5;
	    margin:$fontSize12 auto $fontSize10;
	    color: $colorfff;
	    background-image: url("../img/activity/coupon1.png");
	    background-repeat: no-repeat;
	    background-position: 0 0;
        &.disable {
            background-position: 0 (- (6 * $fontSize10 + 6));
            .predict {
                cursor: default;
                &:hover {
                    background: rgba(33, 114, 230, 0);
                }
            }
        }
        .courseMsg {
            width: 17 * $fontSize10;
	        margin-left: 8 * $fontSize10;
	        padding-top: $fontSize12;
        }
        .courseTitle {
            font-size: $fontSize16;
            line-height: $lineHeight;
        }
        .timeLimit {
            font-size: $fontSize12;
	        line-height: $lineHeight - 0.1;
        }
        .predict {
            width: 7 * $fontSize10;
	        height: 6 * $fontSize10 + 5;
	        line-height: 6 * $fontSize10 + 5;
	        right: 0;
        	top: 0;
        	font-size: $fontSize18;
        	color: $colorfff;
            @include borderRadius(0 10px 10px 0);
            &:hover {
                background: #2172e6;
            }
        }

    }
    .infos {
        font-size: $fontSize12;
        color: $theme;
        margin-bottom: $fontSize20 + 5;
    }
    .progressBox {
        margin-bottom: 3 * $fontSize10;
    }
}

// threeGroup
.threeGroup {
    width: 43 * $fontSize10;
    margin: - 15 * $fontSize10 0 0 (- (21 * $fontSize10 + 5));
    .title {
        font-size: $fontSize18;
        color: $color111;
        margin-bottom: 4 * $fontSize10 + 6;
    }
    .content {
        padding:0 2 * $fontSize18 4 * $fontSize10;
    }
    .infos {
        .ruleTitle {
            font-size: $fontSize12;
            color: $theme;
            margin-bottom: $fontSize10;
        }
        .ruleContent {
            font-size: $fontSize14;
            color: $color666;
            margin-bottom: $fontSize10;
        }
    }
    .shares {
        border-top: $fontSize10 / 10 solid $colorccc;
        background: #eff1f3;
        padding: $fontSize10 + 5 0 $fontSize20 + 5;
        .text {
            font-size: $fontSize14;
            color: $color111;
            margin-bottom: $fontSize14 + 1;
        }
        .shareWays {
            padding : 0 12 * $fontSize10 + 8;
            a {
                display: inline-block;
                width: 3 * $fontSize10 + 4;
                height: 3 * $fontSize10 + 4;
                text-indent: 0;
                margin: 0 $fontSize16 / 2 0 0;
                background-image: url("../img/icons/postFinished.png");
                background-repeat: no-repeat;
                &.bds_tsina {
                    @include link-backPos(((- (12 * $fontSize10 + 2)) (- (3 * $fontSize10 + 7))),((- (12 * $fontSize10 + 3)) 0));
                }
                &.bds_weixin {
                    @include link-backPos(((- (4 * $fontSize10 + 1)) (- (3 * $fontSize10 + 7))),((- (4 * $fontSize10 1)) 0));
                }
                &.bds_sqq {
                    @include link-backPos((0 (- (3 * $fontSize10 + 7))),(0 0));
                }
                &.bds_qzone {
                    @include link-backPos((- (8 * $fontSize10 + 2) (- (3 * $fontSize10 + 7))),(- (8 * $fontSize10 + 2) 0));
                }
            }
        }
    }
}

// receiveSuccess
.receiveSuccess {
    width: 43 * $fontSize10;
    margin:- $fontSize20 * 10 0 0 (- (21 * $fontSize10 + 5));
    overflow: hidden;
    .infos {
        margin:$fontSize10 0 $fontSize20;
        img {
            width: 5 * $fontSize10 + 7;
            height: 5 * $fontSize10 + 7;
        }
        .text {
            font-size: $fontSize18;
            color: $color111;
            margin:$fontSize14 + 1 0 $fontSize10;
        }
        .tips {
            font-size: $fontSize14;
        }
        .description {
            font-size: $fontSize14;
            color: $color666;
            margin: $fontSize14 + 1 5 * $fontSize10 $fontSize20;
            line-height: $lineHeight - 0.1;
        }
    }
    .coupon {
        width: 29 * $fontSize10;
        height: 6 * $fontSize10 + 5;
        margin: 0 auto;
        color: $colorfff;
        background: url("../img/activity/coupon2.png") no-repeat center;
        .num {
            right: - $fontSize12 / 2;
            top: - $fontSize12 / 2;
            width: $fontSize18;
            height: $fontSize18;
            line-height: $fontSize18;
            font-size: $fontSize12;
            color:$colorfff;
            background: #fb560a;
            z-index: 9;
        }
        .courseMsg {
            width: 19 * $fontSize10 + 5;
            margin-left: 8 * $fontSize10 + 5;
            padding-top: $fontSize12;
        }
        .courseTitle {
            font-size: $fontSize16;
            line-height: $lineHeight;
        }
        .timeLimit {
            font-size: $fontSize12;
            line-height: $lineHeight - 0.1;
        }
    }
    .btn.tac {
        margin-top: $fontSize20;
    }
    .confirm {
        width: 8 * $fontSize10 + 5;
        height: 3 * $fontSize10;
        line-height: 3 * $fontSize10;
        margin: $fontSize20 auto 4 * $fontSize10;
        font-size: $fontSize14;
        color: $colorfff;
        @include link-posColor($theme,$darkTheme);
    }
    .userName {
        color: $theme;
    }
}

// couponAway
.couponAway {
    width: 43 * $fontSize10;
    margin:- 19 * $fontSize10 0 0 (- (21 * $fontSize10 + 5));
    overflow: hidden;
    .infos {
        margin:$fontSize10 0 $fontSize20;
        img {
            width: 5 * $fontSize10 + 7;
            height: 5 * $fontSize10 + 7;
        }
        .text {
            font-size: $fontSize18;
            color: $color111;
            margin:$fontSize14 + 1 0 $fontSize10;
        }
        .tips {
            font-size: $fontSize14;
        }
    }
    .instruction .text {
        font-size: $fontSize12;
        color: $theme;
        margin:$fontSize14 + 1 0 $fontSize10;
    }
    .description {
        font-size: $fontSize14;
        color: $color666;
        margin: $fontSize14 + 1 5 * $fontSize10 $fontSize20;
        line-height: $lineHeight - 0.1;
    }
    .coupon {
        width: 29 * $fontSize10;
        height: 6 * $fontSize10 + 5;
        margin: 0 auto;
        color:$colorfff;
        background: url("../img/activity/coupon2.png") no-repeat center;
        .num {
            right: - $fontSize12 / 2;
            top: - $fontSize12 / 2;
            width: $fontSize18;
            height: $fontSize18;
            line-height: $fontSize18;
            font-size: $fontSize12;
            color: $colorfff;
            background: #fb560a;
            z-index: 9;
        }
        .courseMsg {
            width: 19 * $fontSize10 + 5;
            margin-left: 8 * $fontSize10 + 5;
            padding-top: $fontSize12;
        }
        .courseTitle {
            font-size: $fontSize16;
            line-height: $lineHeight;
        }
        .timeLimit {
            font-size: $fontSize12;
            line-height: $lineHeight - 0.1;
        }
    }
    .btn.tac {
        margin-top: $fontSize20;
    }
    .confirm {
        width: 8 * $fontSize10 + 5;
        height: 3 * $fontSize10;
        line-height: 3 * $fontSize10;
        margin: $fontSize20 auto $fontSize20 * 2;
        font-size: $fontSize14;
        color: $colorfff;
        @include link-posColor($theme,$darkTheme);
    }
    .userName {
        color: $theme;
    }
}

// getCoupon
.getCoupon {
    width: 430px;
    margin:- 20 * $fontSize10 0 0 (- (21 * $fontSize10 + 5));
    overflow: hidden;
    .infos {
        margin:$fontSize10 0 $fontSize20;
        img {
            width: 5 * $fontSize10 + 7;
            height: 5 * $fontSize10 + 7;
        }
        .text {
            font-size: $fontSize18;
            color: $color111;
            margin:$fontSize14 + 1 0 $fontSize10;
        }
        .tips {
            font-size: $fontSize14;
        }
    }
    .description {
        font-size: $fontSize14;
        color:$color666;
        margin: $fontSize14 + 1 5 * $fontSize10 $fontSize20;
        line-height: $lineHeight - 0.1;
    }
    .coupon {
        width: 32 * $fontSize10;
        height: 6 * $fontSize10 + 5;
        margin:$fontSize12 0 0 5 * $fontSize10;
        color: $colorfff;
        background-image: url("../img/activity/coupon1.png");
        background-repeat: no-repeat;
        background-position: 0 0;
        .num {
            right: - $fontSize12 / 2;
            top: - $fontSize12 / 2;
            width: $fontSize18;
            height: $fontSize18;
            line-height: $fontSize18;
            font-size: $fontSize12;
            color: $colorfff;
            background: #fb560a;
            z-index: 9;
        }
        .courseMsg {
            width: 19 * $fontSize10 + 5;
            margin-left: 8 * $fontSize10 - 5;
            padding-top: $fontSize12;
        }
        .courseTitle {
            font-size: $fontSize16;
            line-height: $lineHeight
        }
        .timeLimit {
            font-size: $fontSize12;
            line-height: $lineHeight - 0.1;
        }
        .predict {
            width: 7 * $fontSize10;
            height: 6 * $fontSize10 + 5;
            line-height: 6 * $fontSize10 + 5;
            right: 0;
            top: 0;
            font-size: $fontSize16;
            color: $colorfff;
            @include borderRadius(0 10px 10px 0);
            @include link-posColor(rgba(0,0,0,0),#2172e6);
        }
    }
    .btn.tac {
        margin-top: $fontSize20;
    }
    .moreCoupon {
        width: 11 * $fontSize10;
        height: 3 * $fontSize10;
        line-height: 3 * $fontSize10;
        font-size: $fontSize14;
        margin:$fontSize20 + 5 5 * $fontSize10 + 1 4 * $fontSize10;
        @include border(1px,solid,$theme);
        @include link-colors($theme,$colorfff);
        @include link-posColor(rgba(0,0,0,0),$theme);
    }
}

// wechatCodeDialog
.wechatCodeDialog {
    width: 43 * $fontSize10;
    margin:- 20 * $fontSize10 0 0 (- (21 * $fontSize10 + 5));
    overflow: hidden;
    .content {
        padding:3 * $fontSize10 4 * $fontSize10 + 5 4 * $fontSize10 + 5;
        img {
            width: 18 * $fontSize10;
            height: 18 * $fontSize10;
        }
        .info {
            font-size: $fontSize16;
            color: $color333;
            margin:$fontSize16 / 2 auto $fontSize12;
        }
        .tips {
            font-size: $fontSize14;
            color: $colorab;
        }
    }
}
